<template>
  <div class="Personal">
    <van-nav-bar
      title="个人资料"
      left-text="返回"
      @click-left="back"
      fixed
    ></van-nav-bar>
    <van-form round @submit="personaluser">
      <van-cell title="头像" class="info-title">
        <div>
          <div class="img">
            <img :src="infodata.userImg" alt />
          </div>
          <van-uploader :after-read="afterRead" />
        </div>
      </van-cell>
      <van-cell title="昵称" class="info-name">
        <div class="aaa">
          <van-field
            v-model="infodata.nickName"
            :rules="usernamerules"
            name="nickName"
            placeholder="昵称"
          />
        </div>
      </van-cell>
      <van-cell title="账号" class="info-phone">
        <div>
          <van-field :readonly="readonly" v-model="infodata.phone" />
        </div>
      </van-cell>
      <div class="setpass"></div>
      <van-cell title="个性签名" class="info-phone">
        <div>
          <van-field
            @blur="changestext"
            v-model="infodata.desc"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
            name="desc"
          />
        </div>
      </van-cell>
      <div style="margin: 16px">
        <van-button type="default" class="register">修改个人资料</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// import { utils } from '../assets/js/utils'
// import { validForm } from '../assets/js/validForm'

import '../assets/less/Personal.less'

import {
  findAccountInfoAPI,
  updateAvatarAPI,
  updateNickNameAPI,
  updateDescAPI
} from '@/api/user.js'
import { getToken } from '@/utils/storage'
export default {
  data () {
    return {
      usernamerules: [
        {
          required: true,
          message:
            '用户名应由字母、数字、下划线或中文字符组成，长度在2到10个字符之间。',
          pattern: /^[\w\u4e00-\u9fa5]{2,10}$/
        }
      ],
      maxSize: 1 * 1024 * 1024,
      readonly: true,
      isEdit: false,
      infodata: {
        phone: '',
        nickName: '',
        password: '',
        userImg: ''
      }
    }
  },
  created () {
    this.myinfo()
  },
  methods: {
    //   返回上一层
    back () {
      this.$router.push({ name: 'My' })
    },
    // 获取个人资料
    myinfo () {
      const tokenString = getToken()
      if (!tokenString) return this.$router.push({ name: 'Login' })
      findAccountInfoAPI({
        appkey: this.$store.state.appkey,
        tokenString
      }).then(res => {
        this.infodata = res.result[0]
      })
    },
    // 上传头像
    afterRead (file) {
      const tokenString = getToken()
      const type = file.file.type.split('/')[1]
      const imgTypes = ['png', 'gif', 'jpg', 'jpeg']
      if (imgTypes.indexOf(type) === -1) {
        this.$notify({
          message: '图片类型只支持' + imgTypes.join(','),
          color: '#fff',
          background: '#0C34BA'
        })
        return
      }
      // 大小
      if (this.maxSize < file.file.size) {
        this.$notify({
          message: '上传文件大小不能超过' + this.maxSize / 1024 + 'KB',
          color: '#fff',
          background: '#0C34BA'
        })
        return
      }
      // 获取base64
      const base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, '')
      updateAvatarAPI({
        appkey: this.$store.state.appkey,
        tokenString,
        imgType: type,
        serverBase64Img: base64
      }).then(res => {
        this.myinfo()
      })
    },
    // 修改昵称和留言
    personaluser (vale) {
      const tokenString = getToken()
      const p = Promise.all([
        updateNickNameAPI({
          appkey: this.$store.state.appkey,
          tokenString,
          nickName: vale.nickName
        }),
        updateDescAPI({
          appkey: this.$store.state.appkey,
          tokenString,
          desc: vale.desc
        })
      ])
      p.then(res => {
        this.$toast('修改个人信息成功')
        this.myinfo()
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
